<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>余额查询 - 银行业务管理系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css" rel="stylesheet">
    
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .navbar-brand {
            font-weight: bold;
            color: #fff !important;
        }
        
        .main-content {
            padding: 40px 20px;
        }
        
        .query-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            padding: 40px;
            margin-bottom: 30px;
            backdrop-filter: blur(10px);
        }
        
        .result-card {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
            display: none;
        }
        
        .balance-amount {
            font-size: 3rem;
            font-weight: bold;
            color: #28a745;
            margin: 20px 0;
        }
        
        .balance-label {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 10px;
        }
        
        .card-info {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
        }
        
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        
        .btn-query {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            color: white;
            padding: 12px 30px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .btn-query:hover {
            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
            color: white;
            transform: translateY(-2px);
        }
        
        .btn-query:disabled {
            background: #6c757d;
            transform: none;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .security-tips {
            background: #e3f2fd;
            border-left: 4px solid #2196f3;
            padding: 15px;
            margin-top: 20px;
            border-radius: 0 5px 5px 0;
        }
        
        .required {
            color: red;
        }
        
        .input-group-text {
            background-color: #667eea;
            color: white;
            border-color: #667eea;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="/customer">
                <i class="fas fa-university"></i>
                银行业务管理系统 - 客户服务
            </a>
            
            <div class="navbar-nav ml-auto">
                <a class="nav-link" href="/customer">
                    <i class="fas fa-arrow-left"></i> 返回首页
                </a>
            </div>
        </div>
    </nav>

    <div class="container main-content">
        <!-- 查询表单 -->
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-8">
                <div class="query-card">
                    <div class="text-center mb-4">
                        <h2>
                            <i class="fas fa-wallet text-primary"></i>
                            余额查询
                        </h2>
                        <p class="text-muted">请输入银行卡号和密码查询账户余额</p>
                    </div>
                    
                    <form id="balanceForm" novalidate>
                        <div class="form-group">
                            <label for="cardId">银行卡号 <span class="required">*</span></label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-credit-card"></i>
                                    </span>
                                </div>
                                <input type="text" class="form-control" id="cardId" name="cardId" 
                                       required pattern="^[0-9]{16}$" placeholder="请输入16位银行卡号"
                                       maxlength="16">
                            </div>
                            <div class="invalid-feedback">请输入正确的16位银行卡号</div>
                        </div>
                        
                        <div class="form-group">
                            <label for="password">取款密码 <span class="required">*</span></label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-lock"></i>
                                    </span>
                                </div>
                                <input type="password" class="form-control" id="password" name="password" 
                                       required pattern="^[0-9]{6}$" placeholder="请输入6位数字密码"
                                       maxlength="6">
                                <div class="input-group-append">
                                    <button type="button" class="btn btn-outline-secondary" id="togglePassword">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="invalid-feedback">请输入正确的6位数字密码</div>
                        </div>
                        
                        <div class="text-center">
                            <button type="submit" class="btn btn-query" id="queryBtn">
                                <i class="fas fa-search"></i>
                                查询余额
                            </button>
                        </div>
                    </form>
                    
                    <!-- 加载动画 -->
                    <div class="loading">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">查询中...</span>
                        </div>
                        <p class="mt-2">正在查询余额，请稍候...</p>
                    </div>
                    
                    <!-- 安全提示 -->
                    <div class="security-tips">
                        <h6><i class="fas fa-shield-alt"></i> 安全提示</h6>
                        <ul class="mb-0">
                            <li>请确保在安全的网络环境下进行操作</li>
                            <li>不要在公共场所输入密码</li>
                            <li>如发现异常情况，请立即联系客服</li>
                            <li>密码输入错误3次将锁定账户</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 查询结果 -->
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-8">
                <div class="result-card" id="resultCard">
                    <div class="mb-4">
                        <i class="fas fa-check-circle text-success" style="font-size: 3rem;"></i>
                        <h3 class="mt-3">查询成功</h3>
                    </div>
                    
                    <div class="balance-label">当前账户余额</div>
                    <div class="balance-amount" id="balanceAmount">¥0.00</div>
                    
                    <div class="card-info">
                        <div class="row">
                            <div class="col-6">
                                <strong>银行卡号：</strong>
                            </div>
                            <div class="col-6">
                                <code id="displayCardId">****</code>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-6">
                                <strong>查询时间：</strong>
                            </div>
                            <div class="col-6" id="queryTime">
                                --
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <button type="button" class="btn btn-outline-primary mr-2" onclick="queryAgain()">
                            <i class="fas fa-redo"></i> 重新查询
                        </button>
                        <a href="/customer/trades" class="btn btn-outline-success">
                            <i class="fas fa-history"></i> 查看交易记录
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        $(document).ready(function() {
            // 密码显示/隐藏切换
            $('#togglePassword').click(function() {
                const passwordField = $('#password');
                const icon = $(this).find('i');
                
                if (passwordField.attr('type') === 'password') {
                    passwordField.attr('type', 'text');
                    icon.removeClass('fa-eye').addClass('fa-eye-slash');
                } else {
                    passwordField.attr('type', 'password');
                    icon.removeClass('fa-eye-slash').addClass('fa-eye');
                }
            });
            
            // 银行卡号输入格式化
            $('#cardId').on('input', function() {
                let value = $(this).val().replace(/\D/g, '');
                if (value.length > 16) {
                    value = value.substring(0, 16);
                }
                $(this).val(value);
            });
            
            // 密码输入格式化
            $('#password').on('input', function() {
                let value = $(this).val().replace(/\D/g, '');
                if (value.length > 6) {
                    value = value.substring(0, 6);
                }
                $(this).val(value);
            });
            
            // 表单提交
            $('#balanceForm').on('submit', function(e) {
                e.preventDefault();
                
                const form = this;
                if (!form.checkValidity()) {
                    form.classList.add('was-validated');
                    return;
                }
                
                queryBalance();
            });
        });
        
        // 查询余额
        function queryBalance() {
            const cardId = $('#cardId').val().trim();
            const password = $('#password').val().trim();
            
            // 显示加载动画
            showLoading(true);
            $('#queryBtn').prop('disabled', true);
            
            // 发送查询请求
            $.ajax({
                url: '/customer/balance/query',
                method: 'POST',
                data: {
                    cardId: cardId,
                    password: password
                }
            })
            .done(function(result) {
                if (result.code === 200) {
                    // 查询成功，显示结果
                    showResult(result.data, cardId);
                } else {
                    // 查询失败，显示错误信息
                    showError(result.message);
                }
            })
            .fail(function(xhr) {
                if (xhr.status === 400) {
                    const response = xhr.responseJSON;
                    showError(response ? response.message : '请求参数错误');
                } else {
                    showError('网络请求失败，请检查网络连接');
                }
            })
            .always(function() {
                showLoading(false);
                $('#queryBtn').prop('disabled', false);
            });
        }
        
        // 显示查询结果
        function showResult(balance, cardId) {
            $('#balanceAmount').text('¥' + formatMoney(balance));
            $('#displayCardId').text(maskCardId(cardId));
            $('#queryTime').text(formatDateTime(new Date()));
            
            // 隐藏表单，显示结果
            $('.query-card').fadeOut(300, function() {
                $('#resultCard').fadeIn(300);
            });
        }
        
        // 重新查询
        function queryAgain() {
            $('#resultCard').fadeOut(300, function() {
                $('.query-card').fadeIn(300);
                $('#balanceForm')[0].reset();
                $('#balanceForm').removeClass('was-validated');
            });
        }
        
        // 显示/隐藏加载动画
        function showLoading(show) {
            if (show) {
                $('#balanceForm').hide();
                $('.loading').show();
            } else {
                $('.loading').hide();
                $('#balanceForm').show();
            }
        }
        
        // 显示错误信息
        function showError(message) {
            const alertHtml = `
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle"></i>
                    ${message}
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                </div>
            `;
            
            $('.query-card').prepend(alertHtml);
            
            setTimeout(function() {
                $('.alert').alert('close');
            }, 5000);
        }
        
        // 工具函数
        function formatMoney(amount) {
            if (amount == null || amount === '') return '0.00';
            return parseFloat(amount).toFixed(2);
        }
        
        function maskCardId(cardId) {
            if (!cardId || cardId.length !== 16) return cardId;
            return cardId.substring(0, 4) + ' **** **** ' + cardId.substring(12);
        }
        
        function formatDateTime(date) {
            return date.getFullYear() + '-' + 
                   String(date.getMonth() + 1).padStart(2, '0') + '-' + 
                   String(date.getDate()).padStart(2, '0') + ' ' +
                   String(date.getHours()).padStart(2, '0') + ':' + 
                   String(date.getMinutes()).padStart(2, '0') + ':' + 
                   String(date.getSeconds()).padStart(2, '0');
        }
    </script>
</body>
</html>
